@import "./index.skeleton.less";
page {
  background-color: rgba(248, 248, 250, 1);
}

.index {
  padding-bottom: 130rpx;

  .swiper-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1;

    .swiper {
      width: 100%;
      height: 100%;

      .swiper-item {
        .video-box {
          position: relative;
          width: 100%;
          height: 100%;

          .video-play {
            width: 120rpx;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 99;
          }

          .poster {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 90;
          }
        }

        .video {
          display: block;
          width: 100%;
          height: 100%;
        }


      }
    }

    .swiper-pagination {
      position: absolute;
      bottom: 24rpx;
      left: 24rpx;
      background-color: rgba(153, 153, 153, 0.5);
      border-radius: 60rpx;
      padding: 16rpx 24rpx;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      opacity: 1;
      transition: all .3s;

      &:not(.show) {
        opacity: 0;
      }

      .swiper-pagination-text {
        margin: 0 32rpx 0 8rpx;

        text {
          font-size: 28rpx;
          font-weight: 700;
          color: #ffffff;
        }
      }

      .swiper-pagination-scroll {
        width: 240rpx;
        transition: all .5s;

        .swiper-pagination-scroll-n {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          gap: 24rpx;

          .pagination-item {
            position: relative;

            image {
              display: block;
              width: 64rpx;
              height: 64rpx;
              background-color: white;
              border-radius: 12rpx;

              &:nth-child(2) {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 40rpx;
                height: 40rpx;
                transform: translate(-50%, -50%);
                background-color: unset;
              }
            }
          }
        }
      }

      .swiper-pagination-btn {
        width: 40rpx;
        height: 40rpx;
        margin-left: 16rpx;

        image {
          transition: all .5s;
        }
      }

      &.close {
        .swiper-pagination-scroll {
          width: 64rpx;
        }

        .swiper-pagination-btn {
          image {
            transform: rotate(180deg);
          }
        }
      }
    }
  }

  .product-info {
    padding: 20rpx 24rpx;

    .product-item {
      background-color: rgb(255, 255, 255);
      border-radius: 20rpx;
      padding: 24rpx 32rpx;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .product-name {
      margin-bottom: 16rpx;

      text {
        display: -webkit-box;
        font-size: 36rpx;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-weight: bold;
      }
    }

    .product-tag {
      display: flex;
      flex-wrap: wrap;
      gap: 12rpx;
      margin-bottom: 16rpx;

      text {
        display: block;
        font-size: 24rpx;
        font-weight: 400;
        border-width: 1rpx;
        border-radius: 8rpx;
        border-style: solid;
        padding: 5rpx 12rpx;

        color: rgba(255, 161, 74, 1);
        background-color: rgba(255, 246, 237, 1);
        border-color: rgba(255, 237, 221, 1);

        &.color1 {
          color: rgba(255, 161, 74, 1);
          background-color: rgba(255, 246, 237, 1);
          border-color: rgba(255, 237, 221, 1);
        }

        &.color2 {
          color: rgba(17, 159, 31, 1);
          background-color: rgba(231, 245, 233, 1);
          border-color: rgba(210, 236, 213, 1);
        }

        &.color3 {
          color: rgba(66, 174, 252, 1);
          background-color: rgba(236, 247, 255, 1);
          border-color: rgba(219, 240, 255, 1);
        }

        &.color4 {
          color: rgba(233, 62, 40, 1);
          background-color: rgba(255, 255, 255, 1);
          border-color: rgba(255, 208, 207, 1);
        }
      }
    }

    .product-describe {
      margin-bottom: 16rpx;

      text {
        color: rgba(153, 153, 153, 1);
        font-size: 28rpx;
      }
    }

    .product-parameter {
      background-color: rgba(248, 248, 250, 1);
      border-radius: 20rpx;

      .product-parameter-n {
        display: flex;
        flex-wrap: nowrap;
        padding: 24rpx 8rpx;

        .product-parameter-item {
          padding: 0 32rpx;
          border-left: 1rpx solid rgba(238, 238, 238, 1);

          &:nth-child(1) {
            border-left: 0;

            .product-parameter-item-bottom {
              display: flex;
              align-content: center;
            }
          }

          .product-parameter-item-top {
            font-size: 28rpx;
            margin-bottom: 8rpx;
            word-break: keep-all;
          }

          .product-parameter-item-bottom {
            font-size: 24rpx;
            color: rgba(153, 153, 153, 1);
            word-break: keep-all;

            image {
              width: 32rpx;
            }
          }
        }
      }
    }

    .product-item {
      .product-box {
        display: flex;
        margin-bottom: 32rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .product-box-label {
          width: 80rpx;
          margin-right: 16rpx;

          text {
            color: rgba(153, 153, 153, 1);
            font-size: 28rpx;
          }
        }

        &:first-child {
          .product-box-value {
            width: calc(100% - 96rpx);
          }
        }

        .product-box-value {
          width: calc(100% - 136rpx);

          text {
            font-size: 28rpx;
          }

          .product-box-address-text {
            margin-top: 16rpx;

            .address-text {
              font-size: 28rpx;
              display: inline-block;
              width: 100%;
              color: rgba(153, 153, 153, 1);
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: keep-all;
            }
          }

          .product-box-activity {
            display: flex;
            flex-wrap: nowrap;
            overflow: hidden;
            margin-bottom: 20rpx;

            text {
              display: inline-block;
              color: rgba(233, 62, 40, 1);
              border: 1rpx solid rgba(255, 208, 207, 1);
              font-size: 24rpx;
              border-radius: 8rpx;
              padding: 6rpx 12rpx;
              margin-right: 12rpx;
              word-break: keep-all;

              &:last-child {
                margin-right: 0;
              }
            }
          }

          .product-box-full-gift {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;

            .full-gift-tag {
              text {
                color: rgba(233, 62, 40, 1);
                border: 1rpx solid rgba(255, 208, 207, 1);
                font-size: 24rpx;
                border-radius: 8rpx;
                padding: 6rpx 12rpx;
                margin-right: 12rpx;
                word-break: keep-all;
              }
            }

            view {
              text {
                color: rgba(51, 51, 51, 1);
                font-size: 24rpx;
              }
            }
          }
        }

        .product-box-label.required {
          text {
            position: relative;

            &::after {
              content: "*";
              color: red;
              position: absolute;
              right: -20rpx;
              top: 0;
            }
          }
        }

        image {
          width: 40rpx;
        }
      }

      .product-option {
        padding: 24rpx 0;
        border-bottom: 1rpx solid rgba(238, 238, 238, 1);

        &:last-child {
          padding-bottom: 0;
          border-bottom: 0;
        }

        &:first-child {
          padding-top: 0;
        }

        .product-option-header {
          display: flex;
          justify-content: space-between;
          align-content: center;
          align-items: center;
          margin-bottom: 16rpx;

          .product-option-name {
            text {
              font-size: 32rpx;
              font-weight: bold;
            }

            .product-option-unit {
              display: inline-block;
              margin-left: 20rpx;
              font-weight: normal;
              font-size: 24rpx;
              border: 1rpx solid rgba(204, 204, 204, 1);
              padding: 6rpx 12rpx;
              border-radius: 8rpx;
              color: rgba(102, 102, 102, 1);
            }
          }

          .product-option-quantity {
            display: flex;
            align-content: center;
            justify-content: center;

            image {
              width: 60rpx;
              height: 60rpx;
              overflow: hidden;
              transition: all .2s;
              z-index: 2;
              transform-origin: right center;
            }

            text {
              text-align: center;
              min-width: 60rpx;
              font-weight: bold;
              font-size: 32rpx;
              line-height: 60rpx;
              margin: 0 5rpx;
              overflow: hidden;
              transition: all .2s;
              transform-origin: right center;
            }

            image.close,
            text.close {
              transform: translate(+100%) scale(0);
            }
          }
        }

        .product-option-price {
          margin-bottom: 16rpx;

          text {
            color: rgba(227, 66, 66, 1);
            font-size: 40rpx;
            font-weight: 400;

            .currency {
              font-size: 24rpx;
            }
          }

          .discount {
            font-size: 24rpx;
            color: rgba(153, 153, 153, 1);
            text-decoration: line-through;
            margin-left: 8rpx;
          }
        }

        .product-option-batch {
          background-color: rgba(248, 248, 250, 1);
          padding: 24rpx;
          border-radius: 20rpx;

          .batch-item {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: flex-start;
            justify-content: space-between;
            align-content: flex-start;
            margin-bottom: 28rpx;

            &:last-child {
              margin-bottom: 0;
            }

            text {
              color: rgba(102, 102, 102, 1);
            }

            .batch-btn {
              background: linear-gradient(103.27deg, #47CF3E 0%, #3BB610 100.82%);
              font-size: 32rpx;
              font-weight: bold;
              color: #ffffff;
              min-width: 100rpx;
              height: 52rpx;
              line-height: 52rpx;
              border-radius: 52rpx;
              text-align: center;
            }
          }
        }
      }

      .charts {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        image {
          width: 62rpx;
        }

        .charts-text {
          position: relative;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-left: 40rpx;

          &::before {
            display: block;
            content: "";
            position: absolute;
            left: 20rpx;
            width: 1rpx;
            height: 24rpx;
            background-color: rgba(238, 238, 238, 1);
          }

          .number {
            color: red;
          }

          image {
            width: 40rpx;
          }
        }
      }

      .product-tabs {
        display: flex;
        align-items: center;
        gap: 40rpx;
        margin-bottom: 40rpx;

        .tab {
          position: relative;
          font-size: 32rpx;

          &.active {
            font-weight: bold;

            &::before {
              content: "";
              display: block;
              position: absolute;
              bottom: -12rpx;
              left: calc(50% - 20rpx);
              width: 40rpx;
              height: 8rpx;
              border-radius: 8rpx;
              background-color: rgba(248, 112, 54, 1);
            }
          }
        }
      }

      .product-contents {
        .product-content {
          scroll-view {
            .product-list {
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              gap: 20rpx;

              .product-list-item {
                display: flex;
                flex-direction: column;
                width: 284rpx;
                flex: 0 0 284rpx;

                .product-image {
                  margin-bottom: 12rpx;

                  image {
                    aspect-ratio: 1;
                  }
                }

                .product-list-name {
                  margin-bottom: 12rpx;

                  text {
                    font-size: 28rpx;
                    font-weight: 500;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                  }
                }

                .product-tags {
                  white-space: nowrap;
                  overflow: hidden;
                  margin-bottom: 32rpx;

                  text {
                    display: inline-block;
                    color: rgba(233, 62, 40, 1);
                    font-size: 20rpx;
                    padding: 5rpx 8rpx;
                    border: 1rpx solid rgba(255, 208, 207, 1);
                    border-radius: 6rpx;
                    margin-right: 12rpx;
                  }
                }

                .product-bottom {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin-top: auto;

                  .product-price {
                    text {
                      color: rgba(227, 66, 66, 1);
                      font-size: 36rpx;

                      .currency {
                        font-size: 24rpx;
                      }
                    }

                    .unit {
                      font-size: 24rpx;
                      color: rgba(153, 153, 153, 1);
                    }
                  }

                  .product-cart {
                    position: relative;
                    background: linear-gradient(109.3deg, #FDAF17 -7.66%, #FB561C 103.56%);
                    border-radius: 50%;
                    width: 52rpx;

                    .cart-quantity {
                      position: absolute;
                      top: -15rpx;
                      right: -15rpx;
                      min-width: 35rpx;
                      padding: 0 5rpx;
                      text-align: center;
                      background-color: rgba(255, 74, 74, 1);
                      border: 4rpx solid rgba(255, 255, 255, 1);
                      font-size: 20rpx;
                      color: rgba(255, 255, 255, 1);
                      border-radius: 28rpx 28rpx 28rpx 15rpx;
                    }

                    image {}
                  }
                }
              }
            }
          }
        }
      }

      .qa-header {
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid rgba(238, 238, 238, 1);

        text {
          font-size: 32rpx;
        }
      }

      .qa-list {
        .qa-item {
          padding: 20rpx 0;

          .qa-title {
            display: flex;
            align-items: center;
            margin-bottom: 28rpx;

            image {
              width: 40rpx;
            }

            text {
              font-size: 28rpx;
              font-weight: bold;
            }
          }

          .qa-content {
            padding-left: 40rpx;

            text {
              color: rgba(153, 153, 153, 1);

              text {
                color: rgba(102, 102, 102, 1);
                font-weight: bold;
              }
            }

            .tag-title-w {
              margin-bottom: 20rpx;

              text {

                font-size: 24rpx;
                padding: 6rpx 12rpx;
                border-radius: 8rpx;
                color: rgba(255, 255, 255, 1);
              }

              .tag-title1 {
                background-color: rgba(248, 112, 54, 1);
              }

              .tag-title2 {
                background-color: rgba(85, 129, 250, 1);
              }
            }
          }
        }
      }
    }

    .product-details {
      background-color: rgb(255, 255, 255);
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      overflow: hidden;

      .details-header {
        padding: 16rpx 32rpx;

        text {
          font-size: 32rpx;
          font-weight: bold;
        }
      }
    }
  }

  .product-page-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    padding: 20rpx 0;
    background-color: rgba(255, 255, 255, 1);


    .bottom-item {
      text-align: center;

      image {
        width: 48rpx;
        margin: 0 auto;
      }

      text {
        font-size: 24rpx;
        color: rgba(102, 102, 102, 1);
      }

      button {
        background: linear-gradient(109.3deg, #FDAF17 -7.66%, #FB561C 103.56%);
        color: rgba(255, 255, 255, 1);
        font-size: 32rpx;
        font-weight: normal;
        border-radius: 40rpx;
        width: 400rpx;
        height: 80rpx;
      }
    }
  }

  .up {
    position: fixed;
    right: 32rpx;
    bottom: 220rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    border: 1rpx solid rgba(220, 220, 220, 1);
    z-index: 99;
    background-color: rgba(255, 255, 255, 1);
    opacity: 1;
    transition: all .3s;

    &:not(.show) {
      opacity: 0;
      display: none !important;
    }

    image {
      width: 32rpx;
      margin-bottom: 4rpx;
    }

    text {
      font-size: 20rpx;
      color: rgba(0, 0, 0, 0.9);
    }
  }
}